<template>
  <div class="gdap-payment">
    <p
      style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:30px;text-align: center;"
    >微信支付</p>
    <p
      style="color: rgb(187, 187, 187); min-width: 10px; min-height: 10px;font-family: Oswald;ont-size: 12px;text-align: center;"
    >PAYMENT FOR WeChat</p>

    <div style="width:664.38px;height:170px;">
      <p class="b">
        PAYMENT
        <br>FOR PURCHASE
      </p>
    </div>
    <div style="margin:-10% 0">
      <el-row style="text-align:center;margin:5%">
        <el-col :span="6" style="margin-left:38%">
          <div style="margin:auto auto; border:2px solid #ddd;height: 300px;width:300px;padding-top: 50px">
            <h3>支付成功，可返回首页进行使用！</h3>
          </div>
        </el-col>
      </el-row>
    </div>

    
  </div>
</template>
<script>
export default {
  data() {
    return {
      outTradeNo: '',
      params: ''
    }
  },
  mounted() {
    this.outTradeNo = this.$route.query.method
    this.params = this.$route.query.out_trade_no
    if (this.outTradeNo !== '') {
      setTimeout(() => {
        this.$router.push('/')
      }, 3000)
    }
  }
};
</script>
<style scoped>
#preloader_1 {
  position: relative;
}

#preloader_1 span {
  display: block;
  bottom: 0px;
  width: 9px;
  height: 5px;
  background: #9b59b6;
  position: absolute;
  -webkit-animation: preloader_1 1.5s infinite ease-in-out;
  -moz-animation: preloader_1 1.5s infinite ease-in-out;
  -ms-animation: preloader_1 1.5s infinite ease-in-out;
  -o-animation: preloader_1 1.5s infinite ease-in-out;
  animation: preloader_1 1.5s infinite ease-in-out;
}

#preloader_1 span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#preloader_1 span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#preloader_1 span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#preloader_1 span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

@-webkit-keyframes preloader_1 {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
    background: #9b59b6;
  }
}

@-moz-keyframes preloader_1 {
  0% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -moz-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -moz-transform: translateY(0px);
    background: #9b59b6;
  }
}

@-ms-keyframes preloader_1 {
  0% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    -ms-transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    -ms-transform: translateY(0px);
    background: #9b59b6;
  }
}

@keyframes preloader_1 {
  0% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #3498db;
  }
  50% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
}
</style>
